<!-- <div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
</script> -->


<!-- <input type="text" id="text" value="0">
<input type="button" id="btn" value='+1'>
<input type="button" id="btn1" value='-1'>
<script>
    var text = document.querySelector('#text');
    var btn = document.querySelector('#btn');
    var btn1 = document.querySelector('#btn1');
    btn.onclick = function () {
        var num = text.value;
        console.log(num);
        num++;
        text.value = num;
    }
    btn1.onclick = function () {
        var num = text.value;
        console.log(num);
        num--;
        text.value = num;
    }
</script> -->
<!-- 
<input type="checkbox" id="all">全选 <br>
<input type="checkbox" class="girl">貂蝉 <br>
<input type="checkbox" class="girl">小乔 <br>
<input type="checkbox" class="girl">安琪拉 <br>
<input type="checkbox" class="girl">妲己 <br>
<script>
    let all = document.querySelector("#all");
    let girls = document.querySelectorAll('.girl');
    all.onclick = function(){
        for(let i = 0;i<girls.length;i++)
        {
            girls[i].checked = all.checked;
        }
    }
    for(let i = 0;i<girls.length;i++)
    {
        girls[i].onclick = function(){
            all.checked = checkGirls(girls);
        }
    }
    function checkGirls(girls){
        for(var i=0;i<girls.length;i++)
        {
            if(!girls[i].checked){
                return false;
            }
        }
        return true;
    }
</script> -->

<!-- style="font-size: 20px; font-weight: 700;"> -->
<!-- <style>
    div{
        font-size: 20px;
        font-weight: 700;
    }
</style>
<div >
    哈哈
 </div>
 <script>
     var div = document.querySelector('div');
     div.onclick = function () {
         var curFontSize = parseInt(this.style.fontSize);
         curFontSize += 10;
         this.style.fontSize = curFontSize + "px";
    }
 </script> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
        }

        .light {
            background-color: #f3f3f3;
            color: #333;
        }

        .dark {
            background-color: #333;
            color: #f3f3f3;
        }
    </style>

    <div class="container light">
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
    </div>

    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
            console.log(div.className);
            if (div.className.indexOf('light') != -1) {
                div.className = 'container dark';
            } else {
                div.className = 'container light';
            }
        }
    </script>
</body>

</html>